<html>
  <head>
    <title>字体图标</title>
  </head>
  <body>
    <script>
       /*
              十一、字体图标

                       uni-app 支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：

                       ①、支持 base64格式字体图标。

                       ②、支持网络路径字体图标

                       ③、小程序不支持在css 中使用本地文件，包括本地的背景图片和字体文件。需以base64方式可使用。

                       ④、网络路径必须加协议头 https

                       ⑤、从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的

                       ⑥、从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），
                          
                          在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。

                       ⑦、使用本地路径图标字体需注意：

                                  为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；

                                  字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；

                                  字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

                                      @font-face {
                                        font-family: test1-icon;
                                        src: url('~@/static/iconfont.ttf');
                                      }
                      nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。
                      
                      nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号

                                  var domModule = weex.requireModule('dom');
                                  domModule.addRule('fontFace', {
                                    fontFamily: 'fontFamilyName',
                                    src: "url('https://...')",
                                  });

                                  <template>
                                    <view>
                                      <view>
                                        <text class="test">&#xe600;</text>
                                        <text class="test">&#xe687;</text>
                                        <text class="test">&#xe60b;</text>
                                      </view>
                                    </view>
                                  </template>
                                  <style>
                                    @font-face {
                                      font-family: 'iconfont';
                                      src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
                                    }
                                    .test {
                                      font-family: iconfont;
                                      margin-left: 20rpx;
                                    }
                                  </style>
        */
    </script>
  </body>
</html>